import React, { Component } from 'react';
import { Input, Balloon, Icon } from '@icedesign/base';
import Menu from '@icedesign/menu';
import Logo from '../Logo';
import './Header.scss';

const MENUS = [
  {
    name: '搜索',
    path: '/ice/docs/ice-design',
  },
  {
    name: 'hot',
    path: 'https://www.jianshu.com/u/9e2e579df7dd',
  },
  {
    name: '分类',
    children: [
      {
        name: 'springboot',
        path: '/#/ice/component/button',
      },
      {
        name: 'redis',
        path: '/ice/block',
      },
      {
        name: 'mybatis',
        path: '/ice/layout',
      },
      {
        name: '飞冰',
        path: '/ice/scaffold',
      },
    ],
  },
  {
    name: '社区',
    children: [
      {
        name: '简书',
        path: 'https://www.jianshu.com/u/9e2e579df7dd',
      },
      {
        name: '万能群',
        path:
          require('./images/ice-group.png'),
      },
    ],
  },
  {
    name: '代码',
    children: [
      {
        name: 'Github',
        path: 'https://github.com/FutaoSmile',
      },
      {
        name: 'Gitee',
        path: 'https://gitee.com/FutaoSmile',
      },
    ],
  },
  {
    name: '联系我',
    children: [
      {
        name: '微信公众号',
        path: '',
      }, {
        name: '微信号',
        path: '',
      },
      {
        name: '邮箱',
        path: '',
      },
    ],
  },
  {
    name: '登录',
    path: '/#/login',
  },
];

export default class Header extends Component {
  renderBalloonContent = (menu) => {
    return (
      <Menu.Item key={menu.name}>
        <Balloon
          className="header-balloon-content"
          closable={false}
          triggerType="click"
          trigger={
            <a>
              {menu.name}{' '}
              <Icon
                size="xxs"
                type="arrow-down-filling"
                className="arrow-down-filling-icon"
              />
            </a>
          }
        >
          {menu.children.map((subMenu, index) => {
            return (
              <a href={subMenu.path} className="custom-sub-menu" key={index}>
                {subMenu.name}
              </a>
            );
          })}
        </Balloon>
      </Menu.Item>
    );
  };

  renderMenuItem = () => {
    return MENUS.map((menu, index) => {
      if (menu.children) {
        return this.renderBalloonContent(menu);
      }
      return (
        <Menu.Item key={index}>
          <a href={menu.path}>{menu.name}</a>
        </Menu.Item>
      );
    });
  };

  render() {
    return (
      <div className="header-container">
        <div className="header-content">
          <Logo/>
          <div className="header-navbar">
            <div className="header-search-input">
              <Input placeholder="全局搜索"/>
            </div>
            <Menu className="header-navbar-menu" mode="horizontal">
              {this.renderMenuItem()}
            </Menu>
          </div>
        </div>
      </div>
    );
  }
}
